COMO POSICIONAR ELEMENTOS

Como fazer div sobreposta com bootstrap?

Como fazer div sobreposta com bootstrap?

Veja como usar o position no bootstrap para criar esse efeito.

Veja o exemplo abaixo:

DIV PAI
div filho


Nele foi usado:

<div class="position-relative bg-danger">

DIV PAI

    <div class="position-absolute fixed-top bg-warning col-6 offset-3">

    div filho

    </div>

</div>

 

Explicação:

Como podem ver no exemplo foram utilizadas apenas classes do bootstrap sem CSS adicional.

No elemento pai é definido o position como relative para a div se adaptar aos elementos superiores da página.

No elemento filho é usado o position absolute para ele ficar fixado de acordo com o elemento pai. 

Junto com ele é usado o fixed-top para ficar em uma posição no inicio do elemento pai na parte superior, assim sobrepondo as div's.

Para diferenciar os elementos foi usado bg com danger para o elemento pai e warning para o filho.

Para usar a sobreposição e deixar o elemento pai visível foi usado grid do bootstrap com col-6 para ter a metade do tamanho e offset-3 para se deslocar algumas posição e ficar centralizada.

Veja mais em: 

Como usar position no bootstrap?

Como usar o sistema de grids do bootstrap?

Para que serve a classe bg do bootstrap?

Quais os padrões de cores do bootstrap?

Como sobrepor uma div com CSS?



botão de compartilhamento whatsapp botão de compartilhamento no twiter botão de compartilhamento do site botão de compartilhamento no linkedin botão de compartilhamento whatsapp